<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<style type="text/css">
span {
  color: red;
  visibility: hidden;
}
</style>
<script>
  var exp = "";
  function regexp1(obj) {
    exp = /^(1?\d?\d|2[0-4]\d|25[0-5])(\.(1?\d?\d|2[0-4]\d|25[0-5])){3}$/;
    var span1 = document.getElementById("span1");
    visibility(obj, span1);
  }
  function regexp2(obj) {
    exp = /^1(3[4-9]|5[5-9]|8\d)\d{8}$/;
    var span2 = document.getElementById("span2");
    visibility(obj, span2)
  }
  function regexp3(obj) {
    exp = /^[a-z0-9]{1,20}@[a-z0-9]{1,10}(\.[a-z0-9]{1,10}){0,2}\.[a-z]{2,4}$/;
    var span3 = document.getElementById("span3");
    visibility(obj, span3)
  }
  function visibility(obj, span) {
    if (!exp.test(obj))
      span.style.visibility = "visible";
    else
      span.style.visibility = "hidden";
  }
</script>
</head>
<body>
  <div style="text-align: center">
    <form name="regexp">
      <fieldset>
        <legend>正则表达式之验证IPv4地址</legend>
        <label>
          输入IPv4地址：
          <input type="text" name="email" onblur="regexp1(this.value)">
        </label>
        <span id="span1">IPv4地址不符合规范</span>
      </fieldset>
      <fieldset>
        <legend>正则表达式之验证移动电话号码</legend>
        <label>
          输入移动电话号码：
          <input type="text" name="telephone" onblur="regexp2(this.value)">
        </label>
        <span id="span2">移动电话号码不符合规范</span>
      </fieldset>
      <fieldset>
        <legend>正则表达式之验证邮箱</legend>
        <label>
          输入邮箱：
          <input type="text" name="ipv4" onblur="regexp3(this.value)">
        </label>
        <span id="span3">邮箱地址不符合规范</span>
      </fieldset>
    </form>
  </div>
</body>
</html>